{% extends "main/auth_views/card.html" %}

{% block head %}
  {{ block.super }}
  <title>欢迎登录</title>
  <style>
      .btn-outline-success:hover {
          color: var(--bs-success-text);
          background: rgba(var(--bs-success-rgb), 0.125);
      }
  </style>
{% endblock %}

{% block card %}
  <form method="post" accept-charset="UTF-8" enctype="multipart/form-data" action="/login" class="col">

    {% csrf_token %}

    <p>
      <label class="form-label" for="usernameInput"> 用户名 </label>
      <span class="input-group">
        <iconify-icon icon="line-md:account" class="input-group-text"></iconify-icon>
        <input required maxlength="50" name="username" type="text" id="usernameInput" class="form-control"/>
      </span>
    </p>

    <p>
      <label class="form-label" for="passwordInput"> 密码 </label>
      <span class="input-group">
        <iconify-icon icon="material-symbols:key-outline-rounded" class="input-group-text"></iconify-icon>
        <input required maxlength="50" name="password" type="password" id="passwordInput" class="form-control"/>
      </span>
    </p>

    <div class="d-flex mb-2 mt-4 p-0 btn btn-primary w-100 border-0" style="height: fit-content">
      <button type="submit" class="w-100 btn btn-primary align-items-center border-0">
        <span> 登录 </span>
      </button>
    </div>
    <a href="{% url "register" %}" class="btn btn-outline-success w-100 border-0">没有账号？立即注册</a>

  </form>

  <script>
    const submitButton = document.querySelector("button[type=submit]")
    submitButton.addEventListener("click", () => {
      if (document.querySelector("input:invalid")) return
      submitButton.parentElement.classList.add("progress")
      submitButton.classList.add("progress-bar", "progress-bar-striped", "progress-bar-animated")
    })
  </script>
{% endblock %}
